<template>
  <div>
    <div id="my">
      <div id="myHeader">
        <router-link to="/message">
          <div id="headerBox" style="color:#000">
            <span @click="saveMsgTime" class="msgBox">
              <img src="../../../../static/assets/message.png" >消息
            </span>
            <span id="redPoint" v-if="showRed"></span>
          </div>
        </router-link>
        <div id="headerUserBox">
          <img 
            src="../../../../static/assets/me.png" 
            class="meImg" 
            />
            {{this.user.phone | hide6Num}}
        </div>
        <div id="headerUserInfo">
          <div id="userInfoRow1">
            <div>
              返利金额(元)<div id="backMon">{{this.user.backMoney}}</div>
            </div>
            <div id="getCachBtn" @click="getMoneyBack">提现</div>
          </div>
          <div id="userInfoRow2">
            今日返利(元)<span>{{this.user.toDayBack}}</span>
            累计返利(元)<span>{{this.user.allBack}}</span>  
          </div>
        </div>
      </div>
      <section id="sectionBox">
        <div class="sectionRow">
          <router-link to="/investRecord">
            <div class="sectionItem">
              <img src="../../../../static/assets/invest.png" class="sectionItemImg"/>
              <div>投资记录</div>
            </div>
          </router-link>
          <router-link to="/transactionDetail">
            <div class="sectionItem">
              <img src="../../../../static/assets/money.png" class="sectionItemImg"/>
              <div>资金明细</div>
            </div>
          </router-link>
          <router-link to="/backPlan">
            <div class="sectionItem">
              <img src="../../../../static/assets/moneyback.png" class="sectionItemImg"/>
              <div>回款计划</div>
            </div>
          </router-link>
        </div>
        <div class="sectionRow" style="margin:0.6133rem 0;">
        <router-link to="/cashManager">
          <div class="sectionItem">
            <img src="../../../../static/assets/askmoney.png" class="sectionItemImg"/>
            <div>提现管理</div>
          </div>
        </router-link>
        <router-link to="/guide">
          <div class="sectionItem">
            <img src="../../../../static/assets/newer.png" class="sectionItemImg"/>
            <div>新手指南</div>
          </div>
        </router-link>
        <router-link to="/share">
          <div class="sectionItem">
            <img src="../../../../static/assets/share.png" class="sectionItemImg"/>
            <div>邀请返利</div>
          </div>
        </router-link>
        </div>
        <div class="sectionRow">
          <router-link to="/service">
            <div class="sectionItem">
              <img src="../../../../static/assets/service.png" class="sectionItemImg"/>
              <div>在线客服</div>
            </div>
          </router-link>
          <router-link to="/question">
            <div class="sectionItem">
              <img src="../../../../static/assets/question.png" class="sectionItemImg"/>
              <div>常见问题</div>
            </div>
          </router-link>
          <router-link to="/setPage">
            <div class="sectionItem">
              <img src="../../../../static/assets/account.png" class="sectionItemImg"/>
              <div>账户设置</div>
            </div>
          </router-link>
        </div>
      </section>
    </div>
    <BottomBar></BottomBar>
    <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import { XImg,Toast } from 'vux'
import BottomBar from '../../component/common/BottomBar'
import {getBindInfo,getMsg} from '../../../service/getData.js'
import {getStore,setStore, showMsg,getLStore} from '../../../config/mUtils.js'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    XImg,
    BottomBar,
    Toast
  },
  beforeCreate(){
      getSDK()
  },
  created(){
    //判断登录状态
    let now = Number(new Date().getTime())
    if(getLStore('loginkey')){
      let expiretime = Number(getLStore('expiretime'))
      if(now < expiretime){
        setStore('loginkey',getLStore('loginkey')) 
        setStore('phone',getLStore('phone'))
      }
    }

    if(getStore('loginkey')){
      getBindInfo(getStore('loginkey'))
        .then(res=>{
          // console.log(res);
          if(res.status == 1){
            this.user.phone = getStore('phone')
            this.user.toDayBack = res.jrfl
            this.user.allBack = res.ljfl
            if(parseInt(res.yue)==0){
              this.user.backMoney = '0.00'
            }else{
              this.user.backMoney = res.yue
            }
            this.user.bank = res.bank
            this.user.alipay = res.alipay
          }else if(res.status == 99){
            this.$router.replace('/login')
          }
        })
    }else{
      this.$router.push('/login')
    }

    getMsg()
      .then(res=>{
        if(res.status == 1){
          if(res.list){
            let msgDateArr = res.list[0].fbtime.split('-')
            let msgDate = new Date(msgDateArr[0],msgDateArr[1],msgDateArr[2]).getTime()
            this.lastMsgTime = msgDate
          }
        }
      })
  },
  data(){
    return {
      user:{
        phone:'',
        toDayBack:'0.00',
        allBack:'0.00',
        backMoney:'0.00',
        lastMsgTime:'',
        bank:null,
        alipay:null,
      },
        msg:'',
        showPositionValue:false,
        showRed:true
    }
  },
  methods:{
    saveMsgTime(){
      window.localStorage.setItem('msgTime',this.lastMsgTime)
    },
    getMoneyBack(){
      if(this.user.bank || this.user.alipay){
        this.$router.push('/getMoneyBack')
        }else{
          time = setTimeout(()=>{
            this.$router.push('/cashManager')
          },2000)
          showMsg('请先进行提现管理',this)
      }
    }
  },
  filters:{
    hide6Num:function(val){
      return val.replace(/(\d{3})(\d{6})(\d{2})/,"$1******$3");
    }
  },
  mounted(){
    if(localStorage.getItem('msgTime')){
      if(localStorage.getItem('msgTime') < this.lastMsgTime){
        this.showRed = true
      }else{
        this.showRed = false
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import "../../../style/mixin.less";

  #my{
    width: 9.2rem;
    margin: 0 auto;
    padding-bottom: 1.6rem;
    #myHeader{
      padding-top: 0.5333rem;
      #headerBox{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        .msgBox{
          .fx(row);
          img{
            width: 0.4267rem;
            height: 0.32rem;
            margin-right: 0.1333rem;
          }
        }
        #redPoint{
          width: .2rem;
          height: .2rem;
          display: inline-block;
          background-color: red;
          border-radius: .1rem;
          margin-bottom: .4rem
        }
      }
      #headerUserBox{
        box-sizing: border-box;
        padding-left: 0.3467rem;
        height: 2.1333rem;
        font-size: 0.6rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        // background-color: springgreen;
        .meImg{
          width: 1.6rem;
          height: 1.6rem;
          margin-right: 0.4267rem;
        }
      }
      #headerUserInfo{
        height: 3.4667rem;
        margin-top: .3rem;
        box-sizing: border-box;
        padding: 0.5867rem 0.6933rem 0.6133rem 0.5333rem;
        box-shadow:2px 2px 10px #aaa;
        // background-color: skyblue;
        #userInfoRow1{
          height: 1.8933rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-size: 0.34rem;
          color: #b2b2b2;
          // background-color: sienna;
          #backMon{
            color: #000;
            font-size: 0.76rem;
            font-weight: bold;
          }
          #getCachBtn{
            width: 1.7333rem;
            height: 0.7733rem;
            .sc(0.36rem,#fff);
            background-color: #de3a31;
            border-radius: 2rem;
            margin-top: .4rem;
            .fx()
          }
        }
        #userInfoRow2{
          color: #b2b2b2;
          font-size: 0.36rem;
          // background-color: gold;
        }
        span{
          color: #de3a31;
          font-weight: bold;
          margin: 0 0.6933rem 0 0.2133rem;
        }
      }
    }
    #sectionBox{
      .wh(100%,5.36rem);
      margin-top: 0.6933rem;
      .sectionRow{
        .wh(100%,1.3867rem);
        .fx(row,space-around);
        .sectionItem{
          color:#000;
          .fx(column);
          .sectionItemImg{
            .wh(0.8rem,.8rem);
          }
        }
      }
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
</style>
